<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            #div1 {
                width: 100px;
                height: 100px;
                background: red;
                position: absolute;
                left: 0;
                top: 50px;
            }

            #div2 {
                width: 1px;
                height: 300px;
                position: absolute;
                left: 300px;
                top: 0;
                background: black;
            }

            #div3 {
                width: 100px;
                height: 100px;
                background: blue;
                position: absolute;
                left: 600px;
                top: 50px;
            }
        </style>
    </head>
    <body>
        <input type="submit" value="开始运动1" onclick="startMove('div1')">
        <input type="submit" value="开始运动2" onclick="startMove('div3')">
        <div id="div1"></div>
        <div id="div2"></div>
        <div id="div3"></div>
    </body>
    <script>
        //缓冲运动一定不要忘记取整
        function startMove(divName) {
            var oDiv1 = document.getElementById(divName);
            setInterval(function () {
                var speed = (300- oDiv1.offsetLeft) / 10;
                speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
                oDiv1.style.left = oDiv1.offsetLeft + speed + 'px';
                document.title = oDiv1.offsetLeft + ':' + speed;
            }, 30)
        }
    </script>
</html>